<template>
  <div>
    <el-dialog
      class="global-dialog"
      v-model="dialog"
      :lock-scroll="false"
      :append-to-body="false"
      width="950px"
      :show-close="false"
      :close-on-click-modal="false"
    >

        <div class="my-header">
          <el-tabs v-model="data.activeName" class="demo-tabs">
            <el-tab-pane :label="title" name="first">
              <el-form :model="searchParams" ref="ruleFormRef" :rules="rules" status-icon>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="审查意见" prop="comment">
                      <el-input
                        :autosize="{ minRows: 6, maxRows: 10 }"
                        type="textarea"
                        placeholder="请输入"
                        v-model="searchParams.comment"
                        style="width: 100%"  maxlength="512" show-word-limit
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" style="margin-left: 10px">
                    <el-form-item label="附件上传" prop="">
<!--
                      <el-upload
                        ref="uploadRef"
                        :limit="1"
                        :headers="headers"
                        action="/fastDfs/file/upload"
                        :on-success="handleAttachment"
                        drag
                      >
-->
                      <el-upload
                          ref="uploadRef"
                          :limit="5"
                          :headers="headers"
                          action="/fastDfs/file/upload"
                          :on-success="handleStandard"
                          :on-preview="previewFile"
                          :on-remove="removeRdForm"
                          :on-exceed="handleExceed"
                          :on-error="handleError"
                          drag
                      >

                      <i class="el-icon-upload"></i>
                        <div class="el-upload__text">
                          将文件拖到此处，或<em>点击上传</em>
                        </div>
                        <div class="el-upload__tip"></div>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>


      <template #footer>
        <span class="dialog-footer">

          <el-button size="small" @click="close"
            >关闭</el-button
          >

          <el-button size="small" type="primary"  @click="submitState(6,1)"
            >通过</el-button
          >
<!--          <el-button size="small" type="danger"  @click="submitState(5,3)"
            >不通过</el-button
          >-->
          <el-button size="small" type="danger"  @click="submitState(5,5)"
            >退回</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import { checkApprove } from "../../../api/formExamination";
import {type} from "@/utils/utils";

export default {
  components: {},


  props: {
    checkId: {
      type: String,
      required: true,
    },
    dialog: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
  },



  setup(props, { emit }) {
    let searchParams = reactive({
      examinationurl: "",
      comment: "",
    });





    let data = reactive({
      activeName: ref("first"),
    });

    const ruleFormRef = ref();

    //  回调函数
    const handleAttachment = (res) => {
      if (res.code == 200) {
        ElMessage({
          message: "上传成功",
          type: "success",
        });
        searchParams.examinationurl = res.data.path;
      } else {
        ElMessage({
          message: "上传失败",
          type: "error",
        });
      }
    };
    // 退回

    const rules = reactive({
      comment: [{ required: true, message: "请输入审核意见", trigger: "blur" }],
    });

    const close = () => {
      ruleFormRef.value.resetFields();
      emit("changeDialog");
    };
    const cookie = () => localStorage.getItem("token");
    const submitState = async (type:any,state: any) => {
      await ruleFormRef.value.validate((valid: any) => {
        if (valid) {
          // 父子组件传值,获取父组件id
          checkApprove({
            applicationid: props.checkId,
            type:type,
            status: state,
            ...searchParams,
          }).then((res) => {
            if (res.data.code == 200) {
              close();
              ElMessage({
                message: "操作成功",
                type: "success",
              });
            }
          });
        }
      });
    };

    const getFileList = (key) => {
      console.log('projectApplication111',searchParams[key])
      if (type(searchParams[key])) {
        let fileList = JSON.parse(searchParams[key])
        return fileList
      } else {
        return ''
      }
    }
    const previewFile = (file) => {
      console.log(file,'previewFile')
      window.open(file.response.data.path)
    }
    searchParams.examinationurl = getFileList('examinationurl')

    const removeRdForm = (file, uploadFiles) => {
      handleRemove(file, uploadFiles, 'examinationurl')
    }
    const handleRemove = (file, uploadFiles, key) => {
      console.log(file, uploadFiles, key,searchParams[key], 'searchParams[key]')
      searchParams[key] = uploadFiles.map((fileItem) => {
        return {
          name: fileItem.name,
          url: fileItem.url,
        }
      })
      searchParams[key] = JSON.stringify(searchParams[key])
    }
    const handleExceed = () => {
      ElMessage({
        message: '最多上传5个附件',
        type: 'wraning',
      })
    }
    const handleError = () => {
      ElMessage({
        message: '上传失败',
        type: 'error',
      })
    }
    let fileList = [] as any
    const handleStandard = (uploadFile) => {
      if (uploadFile.code == 200) {
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
        console.log('上传成功uploadFile', uploadFile)
        let obj = {
          name: uploadFile.data.fileName,
          url: uploadFile.data.path,
        }
        fileList.push(obj)
        searchParams.examinationurl = JSON.stringify(fileList)
        console.log(searchParams.examinationurl, 'uploadFile.data.path')
      } else {
        ElMessage({
          message: '上传失败',
          type: 'error',
        })
      }
    }

    return {
      handleAttachment,
      headers: {
        Authorization: "Bearer " + cookie(),
      },
      ruleFormRef,
      rules,
      data,
      searchParams,
      close,
      submitState,
      previewFile,
      handleExceed,
      handleError,
      removeRdForm,
      handleStandard,

    };
  },
};
</script>

<style scoped lang="scss"></style>
